<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>Document</title>
</head>

<body>
<script src="vue.min.js"></script>
<!-- id标识vue作用的范围 -->
<div id="app">
    <!-- 2、遍历数据列表 -->
    <table border="1">
        <!-- <tr v-for="item in userList"></tr> -->
        <tr v-for="(item, index) in userList">
            <td>{{index}}</td>
            <td>{{item.id}}</td>
            <td>{{item.username}}</td>
        </tr>
    </table>
</div>

<script>
    // 创建一个vue对象
    new Vue({
        el: '#app',//绑定vue作用的范围
        data: {//定义页面中显示的模型数据
            userList: [
                { id: 11, username: 'helen'},
                { id: 12, username: 'peter'},
                { id: 13, username: 'andy'}
            ]
        },
        methods: {

        }

    })
</script>
</body>
</html>
